<template>
  <el-container style="width:100%;margin:30px auto;">
    <el-aside style="width: 15%">
      <el-menu
          :default-openeds="['1','2','3','4']"
          :router="true"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">

        <el-submenu index="1" unique-opened="true">
          <template slot="title"><i class="el-icon-s-custom"></i>
            <span>用户信息</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/user/me" :class="$route.path=='/user/me'">我的信息</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-box"></i>
            <span>快递信息</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/user/package" :class="$route.path=='/user/package'">我的快递</el-menu-item>
            <el-menu-item index="/user/map" :class="$route.path=='/user/map'">快递导航</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-receiving"></i>
            <span>仓库管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/user/station" :class="$route.path=='/user/station'" >附近站点</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title"><i class="el-icon-s-platform"></i>
            <span>界面显示</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/user/main" :class="$route.path=='/user/main'" >主界面</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <h2>极兔物流客户端&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="text-align:right;font-size: 20px">&nbsp;&nbsp;&nbsp;&nbsp;   {{this.$store.getters.getUser.loginName}}     <a  @click="logout">登出</a></span>
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
<!--            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item index="/manager/admin" :class="$route.path=='/manager/admin'">查看</el-dropdown-item>
              <el-dropdown-item>修改</el-dropdown-item>
            </el-dropdown-menu>-->
          </el-dropdown>
        </h2>
      </el-header>

      <!-- 显示内容 -->
      <el-main>
        <router-view>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>


<script>
import jsCookie from "js-cookie";

export default {
  name: "UserView",
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout(){
      const _this = this
      //首先调用后端logout接口(因该接口需要认证权限,所以需要传入token)
      //其次调用$store清除用户信息及token
      const token=localStorage.getItem("token")
      console.log(_this.$store.getters.getUser.loginName)
      console.log(token)
      _this.$axios.get(`http://localhost:8099/logout/${_this.$store.getters.getUser.loginName}`).then(res => {
        _this.$store.commit("REMOVE_INFO")
        _this.$router.push("/login")
      })
    },
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #276133;
  color: whitesmoke;
  text-align: center;
  height:auto;
}

.el-aside {
  text-align: center;
  overflow: hidden;
}

.el-main {
  color: #333;
  text-align: center;
}

</style>